<template>
  <el-form ref="deptForm" :model="form" :rules="rulesList" label-width="120px">
    <el-form-item label="部门名称" prop="name">
      <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" />
    </el-form-item>
    <el-form-item label="部门编码" prop="code">
      <el-input v-model="form.code" style="width:80%" placeholder="1-50个字符" />
    </el-form-item>
    <el-form-item label="部门负责人" prop="manager">
      <el-select v-model="form.manager" style="width:80%" placeholder="请选择">
        <el-option :value="item.username" :label="item.username" 
        v-for="item in list"
        :key="item.id"
        />
        
      </el-select>
    </el-form-item>
    <el-form-item label="部门介绍" prop="introduce">
      <el-input v-model="form.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click="hSubmit">确定</el-button>
      <el-button size="small" @click="hCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { departments } from "@/api/departments";
import { append ,getSector,dateSector} from "@/api/Organization";

export default {
  props:{
    id:{
      type:String,
      required:true
    },
    isu:{
      type:Boolean,
      required:true
    },
    originList:{
      type:Array,
      required:true
    }
  },
  // 添加校验
    data() {
      const  validCode = (rule,value,callback) =>{
        // console.log(rule);
        // console.log(value);
        // console.log(callback);
        let add = this.originList.map(item => item.code)
        if(this.isu){
          add  = this.originList.filter(item => item.id !== this.id).map(item=> item.code)
        }

        if(add.includes(value)){
          callback(new Error(`${value}重复`))
        }else{
          callback()
        }
        
      }

       const  validName = (rule,value,callback) =>{
        // console.log(rule);
        console.log(value);
        // console.log(callback);
        let ass = this.originList.filter(item => item.pid===this.id).map(item=>item.name)
        if(this.isu){
          const pid = this.originList.find(item =>item.id==this.id).pid
          const aaa = this.originList.filter(item => item.pid = pid)
          ass = aaa.filter(item =>item.id !== this.id).map(item=>item.name)
        }
        if(ass.includes(value)){
          callback(new Error(`${value}重复`))
        }else{
          callback()
        }
        
      }

      

        return {
            // 员工列表信息
            list:[],
            form:{
                name:"",
                code:"",
                manager:"",
                introduce:'',

            },
            rulesList:{
                name:[
                   { validator: validName, trigger: 'blur' },
                  { required: true, message: '请输入部门介绍', trigger: 'blur' },
                  { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
                ],
                code:[
                  { validator: validCode, trigger: 'blur' },
                  { required: true, message: '请输入部门编码', trigger: 'blur' },
                  { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
                  ],
                manager:[
                  { required: true, message: '请输入部门负责人', trigger: 'changa' },
                ],
                introduce:[
                  { required: true, message: '请输入部门介绍', trigger: 'blur' },
                  { min: 1, max: 300, message: '长度在 1 到 300 个字符', trigger: 'blur' }
                ],
            }
        };
    },
    created(){
        this.getdepartments()
        if(this.isu){
          this.loadSector()
        }
    },
    methods:{
      // 重置表单
      resetForm(){
        this.$refs.deptForm.resetFields()
        this. form={
                name:"",
                code:"",
                manager:"",
                introduce:'',

            }
      },
      // 编辑部门信息
      async loadSectors(){
        try {
           await dateSector(this.form)
          // console.log(res);
          this.$emit('vray')
        } catch (error) {
          console.log(error);
        }
      // console.log(this.originList);
      },
      // id获取部门信息
      async loadSector(){
        try {
          const res = await getSector(this.id)
          // console.log(res);
          this.form=res.data
        } catch (error) {
          console.log(error);
        }
      },
      // 新增部门
     async loadappend(){
      try {
        const  res = await append({pid:this.id,...this.form})
        // console.log(res);
        this.$emit('vray');
      } catch (error) {
        console.log(error);
      }
      },
      // 获取员工基本信息
       async getdepartments(){
        const  res = await departments()
        // console.log(res);
        this.list=res.data
       },
        hSubmit(){
          
          this.$refs.deptForm.validate((valid)=>{
            if(!valid) return
          this.isu?this.loadSectors():this.loadappend()

          })
 
        },
        hCancel(){
          this.$emit('fal')
        },
    }

}
</script>

<style>

</style>